<template>
   <div class="content" v-loading="loadingBtn">
        <levelbar></levelbar>
        <div class="table-region">
            <div class="table-title" slot="table-title">
                    <span class="table-title-span">赠送列表</span>
                    <div class="btnPosition">
                        <el-button @click="importFile">导入赠送对象</el-button>
                        <el-button @click="addSendPerson">添加赠送对象</el-button>
                    </div>
                </div>
                <div class="table-box">
                    <el-table :data="addData.AnnounceList" style="width: 100%" border ref="multipleTable" v-loading="loading">
                        <el-table-column  label="序号" type="index"  width="50" align="center">
                        </el-table-column>
                        <el-table-column align="center" label="e学云ID号">
                            <template scope="scope">
                                {{scope.row.eCode?scope.row.eCode:'--'}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="地区">
                             <template scope="scope">
                                {{scope.row.adress?scope.row.adress:'--'}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="手机号">
                              <template scope="scope">
                                {{scope.row.phone?scope.row.phone:'--'}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="姓名">
                             <template scope="scope">
                                {{scope.row.userName?scope.row.userName:'--'}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="赠送积分">
                            <template scope="scope">
                                {{scope.row.point===null?'--':scope.row.point}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="赠送缘由">
                            <template scope="scope">
                                {{scope.row.giveDesc===null?'--':scope.row.giveDesc}}
                            </template>
                        </el-table-column>
                        <el-table-column align="left" label="操作"  prop="">
                            <template scope="scope">
                            <el-button type="text" class="btn-success" 
                                @click="editor(scope.row)">编辑</el-button>
                                <el-button type="text" class="btn-success"
                                @click="deleteListOne(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <p class="person-totle" v-show="addData.AnnounceList.length!=0">共<span>{{addData.AnnounceList.length}}</span>人</p>
                    <div class="massage-warn">
                        <el-button type="primary" @click="submitForm">确认赠送</el-button>
                        <p class="text">一经赠送不可撤回，请谨慎操作</p>
                    </div>
                </div>
       </div>
       <addSendPerson :addData.sync="addData"> </addSendPerson>
       <editData :editData.sync="editData" @updatAddData="updatAddData"> </editData>
       <importLotDialog :addImportData="addImportData" @updatExcelData="updatExcelData"> </importLotDialog>
    </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import addSendPerson from './comps/addSendPerson';
import editData from './comps/editData';
import importLotDialog from './comps/importFile';
import {givePoint} from 'api/creditShop';
import Levelbar from '../../layout/Levelbar';

export default {
    name: 'creditSend',
    components: {TableLayout, startDate, endDate, province, city, region, 
        addSendPerson, importLotDialog, editData, Levelbar},
    data() {
        return {
            formInline: {
                eId: '', // eId
                startDate: '',
                endDate: '',
                pickerOptions1: { disabledDate(time) {
                    return time.getTime() > Date.now();
                }},
                pickerOptions2: {},
                fProvinceId: '', // 省份
                fCityId: '', // 市区
                fAreaId: '' // 区县
            },
            loading: false,
            loadingBtn: false,
            addData: {
                dialogAdd: false,
                // eCode: '',
                AnnounceList: []
            },
            editData: {
                dialogAdd: false,
                point: '',
                giveDesc: '',
                eCode: ''
            },
            orderStatusArr: [
                {status: '全部', statusId: ''},
                {status: '未发货', statusId: '0'},
                {status: '已发货', statusId: '1'}
            ],
            addImportData: {
                dialogLotImport: false,
                AnnounceList: []
            },
            listQuery: {// 分页
                page: 1,
                total: 0
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
          // 全局获取行数
        ...mapActions(['ChangePageSize']),
        // 更新编辑后的列表
        updatAddData() {
            let obj=this.addData.AnnounceList.find((item) => {
                return item.eCode===this.editData.eCode;
            })
            obj.point=this.editData.point?this.editData.point:'--';
            obj.giveDesc=this.editData.giveDesc?this.editData.giveDesc:'--';
        }, 
         // 更新批量导入的列表
        updatExcelData() {
            this.addData.AnnounceList=this.addImportData.AnnounceList
        },
        // 查询列表
        searchFetchData() {
            console.log()
        },
        // 确认赠送 按钮
        submitForm() {
            let list=this.addData.AnnounceList;
            if (list.length) {
                if (this.addData.AnnounceList.some(item => item.point===null)) {
                    this.$message.info('请编辑赠送积分！')
                    return false
                }
                this.loadingBtn=true;
                givePoint(list).then(res => {
                    this.$store.dispatch('UpdateCache'); 
                    this.loadingBtn=false;
                    this.$message.success('赠送成功！');
                    this.$router.push({path: '/creditSendManage'})
                }).catch(() => {
                    this.loadingBtn=false;
                })
            } else {
                this.$message.info('请先添加赠送对象！')
            }
        },
        // 导入按钮
        importFile() {
            this.addImportData.dialogLotImport = true;
            this.addImportData.AnnounceList=this.addData.AnnounceList;
        },
        // 添加赠送对象按钮
        addSendPerson() {
            this.addData.dialogAdd = true;
        },
        // 编辑
        editor(row) {
            this.editData.point=row.point?row.point:'';
            this.editData.giveDesc=row.giveDesc?row.giveDesc:'';
            // console.log(row, 'row')
            this.editData.eCode=row.eCode;// 唯一的e学云ID号
            this.editData.dialogAdd = true;
        },
        // 删除
        deleteListOne(row) {
            this.$confirm('确定删除该赠送对象？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', // warning
                title: '  '
            }).then(() => {
                // 找到要删除的对象
                let obj=this.addData.AnnounceList.find((item) => {
                    return item.eCode===row.eCode;
                })
                // 找到该对象的index 并删除
                this.addData.AnnounceList.forEach((val, index) => {
                    if (val == obj) {
                        this.addData.AnnounceList.splice(index, 1);
                    }
                })
                this.$message.success('已删除!')
            }).catch(() => {
                this.$message.info('已取消删除!')
            });
        },
         // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 20px 20px 10px;
    $bgcolor:#fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .person-totle{
        height:26px;
        line-height: 36px;
        color:#333;
        font-size:14px;
        span{
            display:inline-block;
            padding:0px 2px;
        }
    }
    .massage-warn{
        height: 300px;
        padding:170px 0 50px;
        text-align: center;
        .text{
            font-size:14px;
            height: 40px;
            line-height:40px;
            color: #aaa;
        }
    }
     .table-region{
        margin: 20px 2px 2px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background: #fff;
        .table-box{
            padding:0 20px;
        }
       .pagination-container {
            text-align: right;
            padding: 20px 0;
            padding-right: 20px;
            background: #fff;
        }
        .table-title{
            display: flex;
            justify-content: space-between;
            padding: 20px;
            color: #333;
            font-size: 18px;
            background: #fff;
        }
    }
}
</style>
